import { defineComponent } from "vue";
import cubeSearchImg from "@/assets/images/cube/cube-search.png";
import { ElButton } from "element-plus";
export default defineComponent({
	props: {
		showButton: {
			type: Boolean,
			default() {
				return true;
			}
		},
		btnText: {
			type: String,
			default() {
				return "创建";
			}
		},
		width: {
			type: String,
			default() {
				return "800px";
			}
		},
		title: {
			type: String,
			default() {
				return "没有相关数据";
			}
		},
		subtitle: {
			type: String,
			default() {
				return "您可以前往业务模块，结合业务需求添加相关数据";
			}
		}
	},
	emits: ["add"],
	setup(props, { emit }) {
		return () => {
			return (
				<div
					class="no-data flex justify-center leading-8 pt-10 pb-10"
					style={{ margin: "auto", maxWidth: "70%", width: props.width }}
				>
					<div>
						<div class="flex text-left">
							<div>
								<img class="left-icon" src={cubeSearchImg} style="max-width: inherit;width: 50px;" />
							</div>
							<div class="ml-8">
								<div class="empty-tips-title text-gray-500 pb-1" style="font-size:18px;">
									{props.title}
								</div>
								<div class="descript text-gray-400" style="font-size:14px;padding-top:5px;">
									{props.subtitle}
								</div>
							</div>
						</div>
						<div class="flex items-center">
							<div style="width:50px"></div>
							{props.showButton ? (
								<div class="ml-8 pt-6">
									<ElButton
										type="primary"
										size="large"
										onClick={() => {
											emit("add");
										}}
									>
										{props.btnText}
									</ElButton>
								</div>
							) : null}
						</div>
					</div>
				</div>
			);
		};
	}
});
